<template>
  <view class="tab_container">
    <view
      class="tab_item"
      :class="curIndex===index? 'active':''"
      v-for="(item, index) in tabList"
      :key="index"
      @click="activeBorder(index)"
    >{{item}}</view>
  </view>
</template>

<script>
export default {
  props: {
    tabList: Array,
    initTabIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      curIndex: 0
    };
  },
  methods: {
    activeBorder(index) {
      this.curIndex = index;
      this.$emit("tabChange", index);
    }
  },
  mounted() {
    this.curIndex = this.initTabIndex.default;
  }
};
</script>

<style lang="less" scoped>
.tab_container {
  box-sizing: border-box;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  .tab_item {
    padding: 20rpx 0;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    &.active {
      border-bottom: 3px solid #eb4450;
    }
  }
}
</style>